<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('购物车')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/css/page.css}">
<link th:href="@{/pc/css/index.css}" rel="stylesheet"/>
<style lang="scss">
    .shopping-car-container {
        padding: 50px 40px;
        width: 1404px;
        margin-left: 236px;
    }

    .shopping-car-container .car-headers-menu {
        border-bottom: 1px solid #f5f5f5;
        padding: 0 15px;
    }

    .shopping-car-container .panel-body {
        padding: 15px 0;
    }

    #checkAll {
        vertical-align: text-bottom;
    }

    .shopping-car-container .car-menu {
        text-align: center;
    }

    /*
     商品区
     * */

    .shopping-car-container .goods-content {
        margin-top: 15px;
    }

    .shopping-car-container .goods-content .goods-item {
        margin-top: 20px;
    }

    .shopping-car-container .goods-content .goods-item .car-goods-info {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .shopping-car-container .goods-content .goods-item .goods-image-column img,
    .shopping-car-container .goods-content .goods-item .goods-image-column span {
        display: block;
        float: left;
    }

    .shopping-car-container .goods-content .goods-item .goods-image-column span {
        width: calc(100% - 100px);
        box-sizing: border-box;
        text-indent: 2rem;
        line-height: 25px;
        padding: 10px;
    }

    .goods-price {
        color: red;
        font-weight: bolder;
    }

    .form-control {
        text-align: center;
    }

    .single-total {
        color: red;
        font-weight: bold;
    }

    .goods-params {
        color: darkgray;
    }

    .bottom-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bottom-menu #checkAllBottom {
        vertical-align: text-bottom;
    }

    #deleteMulty {
        color: cornflowerblue;
        cursor: pointer;
        vertical-align: text-bottom;
    }

    .bottom-menu-include {
        background: #e5e5e5;
    }

    #selectGoodsCount {
        color: orangered;
        font-size: 16px;
        font-weight: bolder;
    }

    #selectGoodsMoney {
        color: orangered;
        font-size: 16px;
        font-weight: bolder;
    }

    .panel-default .submitData {
        background: orangered;
        font-size: 16px;
        color: white;
        cursor: pointer;
        font-weight: bolder;
        height: 58px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .panel-default .submitDis {
        background: #B0B0B0;
        cursor: no-drop;
    }

    .shopping-car-container .panel-default {
        position: relative;
    }
</style>

<body>
<div id="top">
    <div class="top_1">
        <div class="top_1-2">
            <ul>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                    <span th:if="${session.userInfo}" style="color: #FB6302">
                        <img th:src="(${#strings.isEmpty(session.userInfo.avatar)}) ? @{/img/profile.jpg} : @{${session.userInfo.avatar}}"
                             class="img-circle"
                             style="width: 25px;height: 25px"
                             alt="User Image">&nbsp;&nbsp;[[${session.userInfo.userName}]]
                    </span>
                </li>
                <li class="n1">
                    <span>
                        <a href="/pc/index">首页</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/car">购物车</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/center">个人中心</a>
                    </span>
                </li>
                <li class="n1">
                    <a th:if="${session.userInfo}" href="/logout">
                        <i class="fa fa-sign-out"></i> 退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="shopping-car-container">
    <div class="car-headers-menu">
        <div class="row">
            <div class="col-md-1 car-menu">
                <label><input type="checkbox" id="check-goods-all"/><span id="checkAll">全选</span></label>
            </div>
            <div class="col-md-4 car-menu">商品名称</div>
            <div class="col-md-1 car-menu">商品类型</div>
            <div class="col-md-1 car-menu">单价</div>
            <div class="col-md-2 car-menu">数量</div>
            <div class="col-md-1 car-menu">金额</div>
            <div class="col-md-2 car-menu">操作</div>
        </div>
    </div>
    <div class="goods-content">
        <div class="goods-item" th:each="item,iterStat : ${petInfos}">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-md-1 car-goods-info">
                        <label>
                            <input type="checkbox" class="goods-list-item" th:value="${item.id}">
                        </label>
                    </div>
                    <div class="col-md-4 car-goods-info goods-image-column">
                        <a th:href="'/pc/details/'+${item.id}" target="_blank">
                            <img class="goods-image" th:src="${item.img}"
                                 style="width: 100px; height: 100px;margin-left: 20px">
                        </a>
                        <span id="goods-info" style="margin-left: 20px">[[${item.name}]]</span>
                    </div>
                    <div class="col-md-1 car-goods-info goods-params">[[${item.typeName}]]</div>
                    <div class="col-md-1 car-goods-info goods-price">
                        <span>￥</span><span class="single-price">[[${item.price}]]</span>
                    </div>
                    <div class="col-md-2 car-goods-info goods-counts">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default car-decrease">-</button>
                            </div>
                            <input type="text" class="form-control goods-count" style="height: 34px;" value="1">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default car-add">+</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 car-goods-info goods-money-count"><span>￥</span><span
                            class="single-total">[[${item.price}]]</span></div>
                    <div class="col-md-2 car-goods-info goods-operate">
                        <button type="button" class="btn btn-danger" th:onclick="|deleCar(${item.id})|">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-body bottom-menu-include">
            <div class="col-md-1 check-all-bottom bottom-menu">
                <label>
                    <input type="checkbox" id="checked-all-bottom"/>
                    <span id="checkAllBottom">全选</span>
                </label>
            </div>
            <div class="col-md-1 bottom-menu">
            </div>
            <div class="col-md-6 bottom-menu">

            </div>
            <div class="col-md-2 bottom-menu">
                <span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
            </div>
            <div class="col-md-1 bottom-menu">
                <span>合计：<span id="selectGoodsMoney">0.00</span></span>
            </div>
            <div class="col-md-1 bottom-menu submitData submitDis" onclick="jiesuan()" id="jiesuan">
                结算
            </div>
        </div>
    </div>
    <div class="posts-nav-wrap" style="height: 98px;">
        <ul class="posts-nav">
            <li class="previous" th:if="${currentPageNUm != 1}">
                <a th:href="@{/pc/car(pageNum=${nextPageNUm - 2 == 0 ? 1:nextPageNUm - 2},typeId=${typeId})}"
                   class="previous" style="margin-top: 15px;">←</a>
            </li>
            <li class="next" th:if="${currentPageNUm != totalPage && totalPage != 0}">
                <a th:href="@{/pc/car(pageNum=${nextPageNUm},typeId=${typeId})}"
                   class="next">←</a>
            </li>
        </ul>
    </div>
    <!--删除确认弹框-->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    确认删除此商品？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary deleteSure">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--是否勾选商品提示-->
    <div class="modal fade" tabindex="-1" role="dialog" id="selectItemTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    请选择要删除的商品！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--批量删除商品-->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteMultyTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    确认删除选择的商品！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary deleteMultySure">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<div id="message" style="display: none">
    <form class="form-horizontal m" id="form-order-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">数量：</label>
            <div class="col-sm-8">
                <input name="number" id="number" class="form-control" type="number" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">总价：</label>
            <div class="col-sm-8">
                <input name="totalPrice" id="totalPrice" class="form-control" readonly type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-8">
                <input name="userName" class="form-control" type="text" th:value="${session.userInfo.userName}"
                       readonly>
                <input name="userId" type="hidden" th:value="${session.userInfo.userId}">
                <input name="petIds" id="petIds" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">地址：</label>
            <div class="col-sm-8">
                <select class="form-control" name="addressId" id="addressId">
                    <option th:each="item:${petAddresses}" th:value="${item.id}"
                            th:text="${item.name}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">付款码：</label>
            <div class="col-sm-8">
                <img th:src=" @{/img/fkm.png} " style="height: 150px;width: 150px;"/>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var deleteGoods = null
    var goodsList = [];

    function ShoppingCarObserver(elInput, isAdd) {
        if (elInput) {
            this.elInput = elInput
            this.parents = this.elInput.parents('.goods-item')
            this.count = parseInt(this.elInput.val())
            this.singlePrice = parseFloat(this.parents.find('.single-price').text())
        }
        if (isAdd) {
            this.isAdd = isAdd
        }
        this.computeGoodsMoney = function () { //计算商品价格
            var moneyCount = this.count * this.singlePrice
            var singleTotalEl = this.parents.find('.single-total')
            console.log(moneyCount)
            singleTotalEl.empty().append(moneyCount)
        }
        this.showCount = function () { // 计算商品选中数量
            var isChecked = this.parents.find('.goods-list-item')[0].checked
            var GoodsTotalMoney = parseFloat($('#selectGoodsMoney').text())
            var goodsTotalCount = parseInt($('#selectGoodsCount').text())
            if (this.elInput) {
                if (this.isAdd) {
                    ++this.count
                    if (isChecked) {
                        $('#selectGoodsMoney').empty().append(GoodsTotalMoney + this.singlePrice)
                        $('#selectGoodsCount').empty().append(goodsTotalCount + 1)
                    }
                } else {
                    if (parseInt(this.count) <= 1) {
                        return
                    } else {
                        --this.count
                        if (isChecked) {
                            $('#selectGoodsMoney').empty().append(GoodsTotalMoney - this.singlePrice)
                            $('#selectGoodsCount').empty().append(goodsTotalCount - 1)
                        }
                    }
                }
                this.elInput.val(this.count)
            }
        }
        this.checkIsAll = function () { //全选
            var checkLen = $('.goods-list-item:checked').length
            if (checkLen > 0) {
                $('.submitData').removeClass('submitDis')
            } else {
                $('.submitData').addClass('submitDis')
            }
            if ($('.goods-item').length === checkLen && checkLen > 0) {
                $('#checked-all-bottom, #check-goods-all').prop('checked', true)
            } else {
                $('#checked-all-bottom, #check-goods-all').prop('checked', false)
            }
        }
        this.checkedChange = function (isChecked) { //选中状态改变， isChecked为选中状态
            if (isChecked === undefined) {
                var isChecked = this.parents.find('.goods-list-item')[0].checked
            }
            var itemTotalMoney = parseFloat(this.parents.find('.single-total').text())
            var GoodsTotalMoney = parseFloat($('#selectGoodsMoney').text())
            var itemCount = parseInt(this.parents.find('.goods-count').val())
            var goodsTotalCount = parseInt($('#selectGoodsCount').text())
            if (isChecked) {
                $('#selectGoodsMoney').empty().append(itemTotalMoney + GoodsTotalMoney)
                $('#selectGoodsCount').empty().append(itemCount + goodsTotalCount)
            } else {
                if (GoodsTotalMoney - itemTotalMoney === 0) {
                    $('#selectGoodsMoney').empty().append('0.00')
                    if (!$('.submitData').hasClass('submitDis')) {
                        $('.submitData').addClass('submitDis')
                    }
                } else {
                    $('#selectGoodsMoney').empty().append(GoodsTotalMoney - itemTotalMoney)
                }
                $('#selectGoodsCount').empty().append(goodsTotalCount - itemCount)
            }
        }
        this.deleteGoods = function () { //删除商品
            var isChecked = this.parents.find('.goods-list-item')[0].checked
            if (isChecked) {
                this.checkedChange(false)
            }
            this.parents.remove()
            this.checkOptions()
        }
        this.checkOptions = function () {
            if ($('#check-goods-all')[0].checked) {
                if ($('.goods-list-item').length <= 0) {
                    $('#checked-all-bottom, #check-goods-all').prop('checked', false)
                }
            } else {
                this.checkIsAll()
            }
        }
    }

    function checkedAll(_this) {
        if ($('.goods-item').length <= 0) {
            $('.submitData').addClass('submitDis')
        } else {
            $('.submitData').removeClass('submitDis')
        }
        for (var i = 0; i < $('.goods-item').length; i++) {
            var elInput = $('.goods-item').eq(i).find('.goods-list-item')
            var isChecked = $('.goods-item').eq(i).find('.goods-list-item')[0].checked
            var checkAllEvent = new ShoppingCarObserver(elInput, null)
            if (_this.checked) {
                if (!isChecked) {
                    elInput.prop('checked', true)
                    checkAllEvent.checkedChange(true)
                }
            } else {
                if (!$('.submitData').hasClass('submitDis')) {
                    $('.submitData').addClass('submitDis')
                }
                if (isChecked) {
                    elInput.prop('checked', false)
                    checkAllEvent.checkedChange(false)
                }
            }
        }
    }

    $('#check-goods-all').on('change', function () {
        if (this.checked) {
            $('#checked-all-bottom').prop('checked', true)
        } else {
            $('#checked-all-bottom').prop('checked', false)
        }
        checkedAll(this)
    })
    $('#checked-all-bottom').on('change', function () {
        if (this.checked) {
            $('#check-goods-all').prop('checked', true)
        } else {
            $('#check-goods-all').prop('checked', false)
        }
        checkedAll(this)
    })
    $('.goods-list-item').on('change', function () {
        var tmpCheckEl = $(this)
        var checkEvent = new ShoppingCarObserver(tmpCheckEl, null)
        checkEvent.checkedChange()
        checkEvent.checkIsAll()
    })
    $('.goods-content').on('click', '.car-decrease', function () {
        var goodsInput = $(this).parents('.input-group').find('.goods-count')
        var decreaseCount = new ShoppingCarObserver(goodsInput, false)
        decreaseCount.showCount()
        decreaseCount.computeGoodsMoney()
    })
    $('.goods-content').on('click', '.car-add', function () {
        var goodsInput = $(this).parents('.input-group').find('.goods-count')
        var addCount = new ShoppingCarObserver(goodsInput, true)
        addCount.showCount()
        addCount.computeGoodsMoney()
    })
    $('.goods-content').on('click', '.item-delete', function () {
        // 删除
        /*  var goodsInput = $(this).parents('.goods-item').find('.goods-list-item')
          deleteGoods = new ShoppingCarObserver(goodsInput, null)
          $('#deleteItemTip').modal('show')*/
    })
    $('.deleteSure').on('click', function () {
        if (deleteGoods !== null) {
            deleteGoods.deleteGoods()
        }
        $('#deleteItemTip').modal('hide')
    })
    $('#deleteMulty').on('click', function () {
        if ($('.goods-list-item:checked').length <= 0) {
            $('#selectItemTip').modal('show')
        } else {
            $('#deleteMultyTip').modal('show')
        }
    })
    $('.deleteMultySure').on('click', function () {
        for (var i = 0; i < $('.goods-list-item:checked').length; i++) {
            var multyDelete = new ShoppingCarObserver($('.goods-list-item:checked').eq(i), null)
            multyDelete.deleteGoods()
            i--
        }
        var checkCount = new ShoppingCarObserver()
        checkCount.checkOptions()
        $('#deleteMultyTip').modal('hide')
    })

    function jiesuan() {
        if (!$("#jiesuan").hasClass("submitDis")) {
            // 进行结算
            var selectGoodsCount = $("#selectGoodsCount").text();
            var selectGoodsMoney = $("#selectGoodsMoney").text();
            $("#number").val(selectGoodsCount);
            $("#totalPrice").val(selectGoodsMoney);
            var petIds = "";
            $(".goods-content").find('.goods-list-item:checked').each(function () {
                petIds += $(this).val() + ",";
            })
            $("#petIds").val(petIds);
            layer.open({
                type: 1, //1:自定义内容 2:iframe
                area: ['500px', '600px'],
                offset: ['100px', '700px'],
                content: $("#message"),  //显示id为message的元素
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var addressId = $("#addressId ").val();
                    if (!addressId) {
                        $.modal.alertError("请到个人中心添加地址");
                        return;
                    }
                    if ($.validate.form()) {
                        $.operate.save(ctx + "pc/petOrder/addByCar", $('#form-order-add').serialize());
                    }
                },
            });
        } else {
            return;
        }
    }

    function deleCar(id) {
        $.modal.confirm("确认要删除选中的吗?", function () {
            $.ajax({
                type: "post",
                url: ctx + "system/petCar/removeCar",
                data: {"ids": id},
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        layer.alert("删除成功", {
                                icon: 1,
                                title: "系统提示"
                            },
                            function (index) {
                                //关闭弹窗
                                layer.close(index);
                                window.location.reload();
                            });
                    }
                }
            });

        });
    }
</script>

</html>
